<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" href="/resources/css/styles.css" type="text/css">
<link rel="stylesheet" href="/resources/css/bootstrap.min.css"
	type="text/css">
<link rel="stylesheet" href="/resources/css/bootstrap-theme.min.css"
	type="text/css">
<script type="text/javascript" src="/resources/js/facebook.js"></script>
<script type="text/javascript" src="/resources/js/jquery.cookie.js"></script>
<link href="/resources/css/font-awesome.css" rel="stylesheet">
<link href="/resources/css/docs.css" rel="stylesheet">
<link href="/resources/css/bootstrap-social.css" rel="stylesheet">
<div class="header" id="header">

	<script type="text/javascript">
		$(function() {
			$('#menuTop').find('li').each(function() {
				$(this).hover(function() {
					$(this).addClass("hover");
				}, function() {
					$(this).removeClass("hover");
				});

			});
			
			hover_avatar_link();
		});
	</script>
	<div id="uploader-session" class="dummy">${sessionScope.uploader}</div>
	<div class="wpage">
		<div class="menu-top">
			<ul class="notifi" id="menuTop">
				<li
					class="${requestScope['javax.servlet.forward.request_uri'] == '/' ? 'active':''}"
					id="menu-item-1">
					<h3>
						<a rel="follow" href="/" title="Trang Chủ"><img class="logo" src="/resources/images/troll-logo.png">Trollvl</a>
					</h3>
				</li>
				<li
					class="${requestScope['javax.servlet.forward.request_uri'] == '/video' ? 'active':''}"
					id="menu-item-2">
					<h3>
						<a rel="follow" href="/video"
							title="Hot Videos">Hot videos</a>
					</h3>
				</li>
				<li
					class="${requestScope['javax.servlet.forward.request_uri'] == '/truyen-cuoi' ? 'active':''}"
					id="menu-item-3">
					<h3>
						<a rel="follow" href="/truyen-cuoi"
							title="Truyện Cười">Truyện cười</a>
					</h3>
				</li>
				<li
					class="${requestScope['javax.servlet.forward.request_uri'] == '/bang-xep-hang' ? 'active':''}"
					id="menu-item-4">
					<h3>
						<a rel="follow" href="/bang-xep-hang"
							title="Bảng Xếp Hạng">Bảng xếp hạng</a>
					</h3>

				</li>
				
				<li
					class="${requestScope['javax.servlet.forward.request_uri'] == '/giai-thuong' ? 'active':''}"
					id="menu-item-4">
					<h3>
						<a rel="follow" href="/giai-thuong"
							title="Bảng Xếp Hạng">Giải thưởng</a>
					</h3>

				</li>

				<li
					class="${requestScope['javax.servlet.forward.request_uri'] == '/upload' ? 'active':''}"
					id="menu-item-5">
					<h3>
						<a rel="follow" href="/upload"
							title="Đăng ảnh">Đăng ảnh <img
							src="/resources/images/upload-icon.png">
						</a>
					</h3>

				</li>
			</ul>
			<ul id="header-uploader" class="notifi right_user">
				<c:if test="${sessionScope.uploader != null}">
					<li id="avatar-area">
						<div class="avatar noNoti">
							<a href="/uploader/${sessionScope.uploader.id}" class="avatarLink"
								title="${sessionScope.uploader.name}"> <img
								src="${sessionScope.uploader.avatar}">
								${sessionScope.uploader.name}
							</a>
							<div class="blank"></div>
							<ul>
								<li><a href="/uploader/${sessionScope.uploader.id}">Ảnh của bạn</a></li>
								<li><a href="/uploader/info">Thông tin cá nhân</a></li>
								<li><a href="/uploader/change-password">Đổi mật khẩu</a></li>
								<li><a onclick="logout();">Thoát</a></li>
							</ul>
						</div>

					</li>
				</c:if>

			<li id="login-facebook-area" style="display:none; padding-right:0"><a href="/uploader/login"
					class="btn btn-block btn-social btn-facebook"
					style="line-height: 1.2; margin-top: 4px;padding: 6px 20px; font-size: 15px"> Đăng Nhập
				</a></li>

			</ul>
		</div>
	</div>
</div>